<%@page contentType="text/html; charset=utf-8"%>
<html>
<head>
<!-- 
<base href="http://www.ajaxdaddy.com/ajax/mootools/autocomplete/">
 -->
<style type="text/css">
body {color: white;background: #52616F;}
a { color: white; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>A Playground - Widget Birthplace</title>

<link rel="stylesheet" href="css/Autocompleter.css" type="text/css" media="screen">
<script type="text/javascript" src="http://localhost:8081/upis/js/mootools.svn.js"></script>
<script type="text/javascript" src="javascript/Observer.js"></script>
<script type="text/javascript" src="javascript/Autocompleter.js"></script>

</head>
<body>
<div id="container">
<h1>moo.Playground</h1>
<p>Json and Xhtml Version - Backend is a flatfile database with 6Mb spanish dictonary. So its maybe too slow sometimes ;)</p>

<form  name="landSearchFrm" id='landSearchFrm' action="#" method="post">

<fieldset>
<legend>Ajax.Json - enter any string - random result returned from server</legend>

<input autocomplete="off" name="landSearchValue" id="landSearchValue" type="text">
<div style="display: none;" class="autocompleter-loading"></div><br>

</fieldset>
<input type="hidden" name="landSiEup" value="000">
<input type="hidden" name="landDongRi" value="">
</form>

</div>
<script type="text/javascript">

	/**
	*
	* @param : url (url string)
	* @param : input (autoinput element)
	* @param : frm (frm element)
	*/			
function autocompleter(url,input,frm){
		
	var el = input;
	
	var indicator2 = new Element('div', {'class': 'autocompleter-loading', 'styles': {'display': 'none'}}).setHTML('').injectAfter(input);
	var completer2 = new Autocompleter.Ajax.Json(
					 el, 
					 url, {
						'postVar' : input.id,
						'postData' : frm.toQueryString(),
						'onRequest': function(el) {
							indicator2.setStyle('display', '');
						},
						'onComplete': function(el) {  
							indicator2.setStyle('display', 'none');
						}
					});
}		
/*
* example 
*/		
autocompleter('http://localhost:8081/upis/autoCompleteLandSearch.do',$('landSearchValue'),	$('landSearchFrm'));		
</script>
</body>
</html> 